<template>
  <div class="container">
    <el-row>
      <el-col :span="17" class="left">
        <div class="peak">
          <span class="el-icon-s-shop"></span>
          <div class="juzi">
            <span>橘子</span>
          </div>
          <div class="button">
            <el-button size="medium" class="el-icon-shopping-bag-2" round
              >进店</el-button
            >
          </div>
          <!-- 描述、服务、物流 -->
          <div class="describe">
            <div class="describe1">
              <div class="describe2">
                <div class="describe3">0.0</div>
                <div class="describe4">描述</div>
              </div>
              <div class="describe5">
                <svg
                  width="7px"
                  height="2px"
                  viewBox="0 0 7 2"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <title>Rectangle@2x</title>
                  <g
                    id="Symbols"
                    stroke="none"
                    stroke-width="1"
                    fill="none"
                    fill-rule="evenodd"
                  >
                    <g
                      id="工作台/515-改数字2"
                      transform="translate(-894.000000, -131.000000)"
                      fill="#FF585E"
                    >
                      <rect
                        id="Rectangle"
                        x="894"
                        y="131"
                        width="7"
                        height="2"
                        rx="1"
                      ></rect>
                    </g>
                  </g>
                </svg>
              </div>
            </div>
            <div class="describe1">
              <div class="describe2">
                <div class="describe3">0.0</div>
                <div class="describe4">服务</div>
              </div>
              <div class="describe5">
                <svg
                  width="7px"
                  height="2px"
                  viewBox="0 0 7 2"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <title>Rectangle@2x</title>
                  <g
                    id="Symbols"
                    stroke="none"
                    stroke-width="1"
                    fill="none"
                    fill-rule="evenodd"
                  >
                    <g
                      id="工作台/515-改数字2"
                      transform="translate(-894.000000, -131.000000)"
                      fill="#FF585E"
                    >
                      <rect
                        id="Rectangle"
                        x="894"
                        y="131"
                        width="7"
                        height="2"
                        rx="1"
                      ></rect>
                    </g>
                  </g>
                </svg>
              </div>
            </div>
            <div class="describe1">
              <div class="describe2">
                <div class="describe3">0.0</div>
                <div class="describe4">物流</div>
              </div>
              <div class="describe5">
                <svg
                  width="7px"
                  height="2px"
                  viewBox="0 0 7 2"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <title>Rectangle@2x</title>
                  <g
                    id="Symbols"
                    stroke="none"
                    stroke-width="1"
                    fill="none"
                    fill-rule="evenodd"
                  >
                    <g
                      id="工作台/515-改数字2"
                      transform="translate(-894.000000, -131.000000)"
                      fill="#FF585E"
                    >
                      <rect
                        id="Rectangle"
                        x="894"
                        y="131"
                        width="7"
                        height="2"
                        rx="1"
                      ></rect>
                    </g>
                  </g>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="shop">
          <!-- 店铺信息 -->
          <div class="shop_info">
            <!-- 待付款、待收货等样式 -->
            <div class="details">
              <a class="written" target="_blank">
                <div class="number">0</div>
                <div class="word">待付款</div>
              </a>
              <a class="written" target="_blank"
                ><div class="number">0</div>
                <div class="word">待发货</div></a
              ><a class="written" target="_blank"
                ><div class="number">0</div>
                <div class="word">待售后</div></a
              ><a class="written"
                ><div class="number">0</div>
                <div class="word">待评价</div></a
              ><a class="written" target="_blank"
                ><div class="number">0</div>
                <div class="word">违规</div></a
              >
            </div>
          </div>

          <!-- 统计数据 -->
          <div class="shop_data">
            <!-- 系统数据 -->
            <el-col>
              <div class="top">
                <span style="font-size: 17px; font-weight: bold">店铺数据</span>
                &nbsp;&nbsp;
                <span style="font-size: 12px; font-weight: bold"
                  >数据更新时间：2021-08-17 15:15:35</span
                >
                <div class="index">
                  <el-button class="el-icon-circle-plus-outline" type="text"
                    >指标</el-button
                  >
                </div>
              </div>
              <el-row :gutter="15">
                <el-col :span="6">
                  <div class="abc">支付金额</div>
                </el-col>
                <el-col :span="6">
                  <div class="abc">访客数</div>
                </el-col>
                <el-col :span="6">
                  <div class="abc">支付子订单数</div>
                </el-col>
                <el-col :span="6">
                  <div class="abc">支付转化率</div>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="6">
                  <div class="abc">浏览量</div>
                </el-col>
                <el-col :span="6">
                  <div class="abc">加购人数</div>
                </el-col>
                <el-col :span="6">
                  <div class="abc">客单价</div>
                </el-col>
                <el-col :span="6">
                  <div class="abc">支付买家数</div>
                </el-col>
              </el-row>

              <!-- 经营建议 -->
              <div class="manage">
                <span>经营建议</span>
                <el-button class="man" type="text">更多</el-button>
              </div>
              <el-row :gutter="200">
                <el-col :span="10">
                  <div>如何提升商品的曝光机会？</div>
                  <br />
                  <span class="xiao">快速掌握商品引量的六大方法</span>
                  <div class="study">
                    <el-button type="primary" size="medium" round
                      >去学习</el-button
                    >
                  </div>
                </el-col>
                <el-col :span="10">
                  <div>了解手机端商品搜索的排名逻辑</div>
                  <br />
                  <span class="xiao">掌握搜索渠道引流的核心秘籍</span>
                  <div class="study">
                    <el-button type="primary" size="medium" round
                      >去学习</el-button
                    >
                  </div>
                  <br />
                </el-col>
              </el-row>

              <el-row :gutter="200">
                <br />
                <el-col :span="10">
                  <div>店铺动态评分是如何计分的？</div>
                  <br />
                  <span class="xiao">一分钟快速掌握店铺评分规则</span>
                  <div class="study">
                    <el-button type="primary" size="medium" round
                      >去学习</el-button
                    >
                  </div>
                </el-col>
                <el-col :span="10">
                  <div>新开店快速出单可以这么做</div>
                  <br />
                  <span class="xiao">六招教你实现快速破零</span>

                  <div class="study">
                    <el-button type="primary" size="medium" round
                      >去学习</el-button
                    >
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </div>
        </div>
      </el-col>

      <el-col :span="7" class="right">
        <!-- 待办 -->
        <div>
          <span class="thing">待办事务 </span>
          <el-button class="handle" type="text">更多</el-button>
          <el-empty description="暂无更多任务"></el-empty>
        </div>
        <!-- 增值 -->
        <div>
          <span class="thing">增值服务 </span>
          <el-button class="handle" type="text">更多</el-button>
          <el-empty description="暂无增值服务"></el-empty>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.container {
  font-family: 幼圆;
  min-height: calc(100vh - 120px);
  /*   background-color: yellowgreen; */
}

.left {
  /*   background-color: sandybrown; */
  min-height: calc(100vh - 120px);
}

.top {
  margin-top: 15px;
}

.shop {
  width: 840px;
  margin: 0 auto;
}

.shop_info {
  height: 100px;
  margin-top: -25px;
  /*   background-color: slateblue; */
}

.shop_data {
  height: 300px;
  /*  background-color: springgreen; */
}

.right {
  /*   background-color: skyblue; */
  min-height: calc(100vh - 120px);
}

/* 顶部文字样式 */
.peak {
  font-size: 25px;
}

/* 顶部图标文字及按钮 */
.el-icon-s-shop {
  font-size: 40px;
  color: orangered;
  margin-left: 45px;
}
.juzi {
  margin-left: 90px;
  margin-top: -32px;
}

/* 描述、服务、物流 */
.describe {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  margin-left: 670px;
  margin-top: -35px;
}
.describe1 {
  width: 44px;
  margin-left: 30px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.describe2 {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.describe3 {
  height: 32px;
  width: 33px;
  font-size: 22px;
  color: #111;
  text-align: left;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.describe4 {
  opacity: 0.6;
  font-size: 13.09px;
  color: rgb(68, 66, 66);
  letter-spacing: 0;
  text-align: left;
  font-weight: bold;
}
.describe5 {
  position: relative;
  top: 11px;
}

/* 待付款、待收货等样式*/
.details {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 25px;
  height: 96px;
  background-color: #266cf8;
  border-radius: 12px;
  overflow: hidden;
  width: 860px;
  margin: 50px auto;
}
.written:hover {
  background-color: #0142c5;
}

.written {
  height: 100%;
  width: 172px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.number {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  height: 47px;
  width: 57px;
  font-size: 36px;
  color: white;
}
.word {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  height: 20px;
  width: 42.2px;
  opacity: 0.6;
  font-size: 14px;
  color: white;
}

/* 系统数据样式 */
.abc {
  height: 100px;
  background-color: rgb(231, 231, 231);
  border-radius: 12px;
  text-align: center;
  margin-top: 10px;
  line-height: 100px;
}

.button {
  margin-left: 190px;
  margin-top: -31px;
}
/* 指标 */
.index {
  margin-top: -25px;
  margin-left: 790px;
  font-size: 15px;
  font-weight: bold;
}
/* 经营建议 */
.manage {
  margin-top: 10px;
  font-size: 17px;
  font-weight: bold;
}
.man {
  margin-left: 730px;
  font-size: 15px;
}
.handle {
  margin-left: 270px;
  font-size: 15px;
}
.thing {
  font-size: 17px;
  font-weight: bold;
}
.xiao {
  font-size: 14px;
}
.study {
  margin-left: 300px;
  margin-top: -45px;
}
</style>